
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预约结果</title>
    <style>
        ul {
            list-style-type: none;
            /* 去除列表项前面的点 */
            padding: 0;
            /* 去除内边距 */
            margin: 0;
            /* 去除外边距 */
        }

        li:hover {
            background-color: #f0f0f0;
            /* 添加悬停时的背景颜色 */
        }

        *,
        img,
        p {
            padding: 0;
            margin: 0;
        }

        .flex {
            width: 100%2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }

        .laba {
            width: 100%;
            height: 38px;
            line-height: 38px;
            display: flex;
            align-items: center;
            color: #A47E40;
            font-size: 12.8px;
            background: #FCEEC7;
        }

        .icon {
            width: 14px;
            padding-left: 20px;
        }

        .pl10 {
            padding-left: 8px;
        }

        .large {
            font-size: 15px;
            color: #E89758;
        }

        .white {
            width: 325px;
            height: 414px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            border-radius: 6px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        }

        .white img {
            height: 200px;
            width: 200px;
            margin-top: 12px;
        }

        .time {
            width: 160px;
            display: flex;
            align-items: center;
            border-radius: 4px;
            justify-content: center;
            line-height: 26px;
            margin-top: 40px;
            background: #EEF2FE;
        }

        .gla {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            width: 274px;
            height: 25px;
            line-height: 25px;
            font-size: .7375rem;
            color: #9B9B9B;
            background: #F6F6F6;
            border-radius: 3px;
        }

        .p {
            margin-top: 20px;
            line-height: 20px;
            font-size: 1.3rem;
            color: #4EC084;
        }

        .sma {
            margin-right: 20px;
            font-size: .8rem;
            color: #000;
        }

        .p:last-child {
            margin-top: 10px;
        }

        .last {
            width: 100%;
            height: 100px;
            position: fixed;
            bottom: 0;
        }

        .Group {
            position: fixed;
            width: 64px;
            height: 50px;
            right: 0;
            top: 16%;
        }

        .address {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            /* 允许换行 */
        }

        li {
            margin: 10px 0;
            height: 50px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1 1 50%;
            /* 每个 <li> 占 50% 宽度 */
            box-sizing: border-box;
            border: 4px solid #ffffff;
            /* 添加边框以便于观察 */
            cursor: pointer;
        }

        li:nth-child(1) {
            background-color: #cf1212;
            /* 第一项背景色 */
        }

        li:nth-child(2) {
            background-color: #10b329;
            /* 第二项背景色 */
        }

        li:nth-child(3) {
            background-color: #10b329;
            /* 第三项背景色 */
        }

        li:nth-child(4) {
            background-color: #1c22cd;
            /* 第四项背景色 */
        }

        li:nth-child(5) {
            background-color: #1c22cd;
            /* 第五项背景色 */
        }

        li:nth-child(6) {
            background-color: #30a7eb;
            /* 第六项背景色 */
        }

        li:nth-child(7) {
            background-color: #f38fbc;
            /* 第七项背景色 */
        }

        li:nth-child(8) {
            background-color: #f38fbc;
            /* 第八项背景色 */
        }

        li:nth-child(9) {
            background-color: #d2be6d;
            /* 第八项背景色 */
        }

        .tip {
            padding: 10px;
            font-size: 14px;
        }

        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="myListBox">
        <ul class="address" id="myList">
            <li data-value="石桥铺站">石桥铺站</li>
            <li data-value="杨家坪站">杨家坪站</li>
            <li data-value="临江门站">临江门站</li>
            <li data-value="金童路站">金童路站</li>
            <li data-value="金渝站">金渝站</li>
            <li data-value="幸福广场站">幸福广场站</li>
            <li data-value="江北城站">江北城站</li>
            <li data-value="光电园站">光电园站</li>
            <li data-value="沙坪坝站">沙坪坝站</li>
        </ul>
        <p class="tip">使用方法：<br />选择一个站点，点击一下，可获得当前站点的预约二维码<br />
            在<span style="color: #cf1212">二维码页面</span>
            刷新一下，可重新再选择站点
        </p>
    </div>
    <div class="flex" style="display: none;" id="concent">
        <img class="Group" src="https://czy-dev.oss-cn-beijing.aliyuncs.com/Group.png" alt="">
        <div class="laba">
            <img src="https://czy-dev.oss-cn-beijing.aliyuncs.com/Vector.png" alt="" class="icon">
            <span class="pl10">请务必在预约时间段<span class="large">前5分钟</span>内进站</span>
        </div>
        <div class="white">
            <p class="time">失效时间: 02分<span id="countdown">60</span>秒</p>
            <img src="https://czy-dev.oss-cn-beijing.aliyuncs.com/5000qrCode.png" alt="">
            <p class="gla">请凭此二维码，前往地铁站指定预约通道扫码进站</p>
            <p class="p"><span class="sma">6号线</span><span id="adressText">江北城站</span></p>
            <p class="p"><span class="sma" id="date"></span>18:10～18:20</p>
        </div>
        <img class="last" src="https://czy-dev.oss-cn-beijing.aliyuncs.com/1718353474985.jpg" alt="">
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var listItems = document.querySelectorAll("#myList li");
            var adressText = document.getElementById("adressText");
            var myListBox = document.getElementById("myListBox");
            var concent = document.getElementById("concent");

            listItems.forEach(function (item) {
                item.addEventListener("click", function () {
                    var dataValue = item.getAttribute("data-value");
                    adressText.textContent = dataValue;
                    myListBox.style.display = "none";
                    concent.style.display = "flex";
                });
            });
        });





        // 获取当前日期
        const today = new Date();

        // 提取年、月、日
        const year = today.getFullYear();
        const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
        const day = String(today.getDate()).padStart(2, '0');

        // 组装日期字符串
        const currentDate = `${year}-${month}-${day}`;

        // 显示日期
        document.getElementById('date').textContent = currentDate;

        let countdownInterval;

        function startCountdown() {
            let timeLeft = 60; // 设置倒计时时间为60秒
            const countdownElement = document.getElementById('countdown');

            const interval = setInterval(function () {
                let seconds = timeLeft % 60;
                // 格式化秒数，个位数前加0
                countdownElement.innerHTML = (seconds < 10 ? "0" : "") + seconds;
                timeLeft--;

                if (timeLeft < 0) {
                    clearInterval(interval);
                    startCountdown(); // 重新启动倒计时
                }
            }, 1000); // 每秒更新一次倒计时
        }

        window.onload = function () {
            startCountdown();
        };
    </script>
</body>

</html>
